import { count, log } from "node:console";
import { url } from "node:inspector";
import React, { Component } from "react";
type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
interface iState {
  count: number;
}
interface iProps {
  name: string;
}
//https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
//生命周期
class Box extends Component{
  // --------------组件卸载------------------
  componentWillUnmount(): void {
    console.log('组件卸载')
    
  }
  render(): React.ReactNode {
    return <>
    <h1>子组件</h1>
    </>
  }
}

export default class App extends Component {
  state: iState = {
    count: 100,
  };

  //------------挂载------------------
  constructor(props: iProps) {
    super(props);
    console.log("constructor");
  }
  //会在组件挂载和更新阶段执行
  static getDerivedStateFromProps(props: iProps, state: iState) {
    console.log("getDerivedStateFromProps");
    //返回对象中的内容，就是要修改的内容
    return {
      // count:state.count+1,
    }
  }
 //会在组件挂载和更新阶段执行
  render() {
    console.log("render");
    return (
      <div>
        <h1
          style={{ userSelect: "none", cursor: "pointer" }}
          onClick={() => this.setState({ count: this.state.count + 1 })}
        >
          {this.state.count}
        </h1>
       {this.state.count==100&& <Box></Box>}

      </div>
    );
  }

  //***********组件挂载完成后执行的生命周期
  componentDidMount() {
    console.log("组件挂载完成");
  }


  //--------------更新阶段------------------
  shouldComponentUpdate(nextProps: iProps, nextState: iState) {
    console.log("shouldComponentUpdate");
    if(nextState.count==105){
      //性能优化，不更新某些数据页面，不调用render
      return false;
    }
    return true;//true才能更新数据
  }

  //快照更新前调用，要与componentDidUpdate一起使用，可以拿到原来的值
  getSnapshotBeforeUpdate(prevProps: iProps, prevState: iState) {
    console.log("getSnapshotBeforeUpdate");
    return '以后工作了不要随便晚安';
  }
//snapshot参数是getSnapshotBeforeUpdate的返回值，可以拿到原来的值
  componentDidUpdate(prevProps: iProps, prevState: iState, snapshot: string) {
    console.log("componentDidUpdate");
  }
}
